<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div
      id="content"
      style="margin-bottom: 50px"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="w">
        <div class="login-box">
          <form id="login-form" style="margin-top: 20px">
            <div class="input-group">
              <span>帐号:</span>
              <input
                type="text"
                name="user"
                placeholder="请输入账户名"
                v-model="dataForm.userId"
              />
            </div>
            <div class="input-group">
              <span>密码:</span>
              <input
                type="password"
                v-model="dataForm.userPwd"
                placeholder="请输入密码"
              />
            </div>
            <!--
            <div class="input-group ">
              <div class="code clearfix">
              <span class="fl">验证码:</span>
                <input
                  type="text"
                  name="v_code"
                  class="fl"
                  autocomplete="off"
                  maxlength="4"
                  v-model="dataForm.verifyCode"
                  placeholder="请输入验证码"
                />

                <img
                  class="fr"
                  :src="picUrl"

                />
              </div>
            </div>
            -->

            <input
              id="loginsub"
              @click="login"
              type="button"
              value="立即登录"
              style="margin-top: 40px"
            />
            <p id="go-reg" class="">
              <a href="" class="fl">忘记密码?</a>
              <nuxt-link class="register" to="/register">立即注册</nuxt-link>
            </p>
          </form>
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
import { mapMutations } from "vuex";
import Cookie from "js-cookie";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
  },
  data() {
    return {
      dataForm: {
        userId: "",
        userPwd: "",
        verifyCode: "",
      },
      loading: false,
      picUrl: this.baseUrl + "/sys/user/getVerifyCode.do",
    };
  },
  mounted() {
    console.log(this.baseUrl);
    //this.getVerifyCode()
  },
  methods: {
    getVerifyCode() {
      this.$http("get", "/sys/user/getVerifyCode.do").then((res) => {
        console.log(res);
      });
    },
    login() {
      if (this.dataForm.userId == "") {
        this.$message.error("请输入帐号");
        return;
      } else if (this.dataForm.userPwd == "") {
        this.$message.error("请输入密码");
        return;
      } else {
        this.loading = true;
        this.$http("post", "/sys/user/login.do", this.dataForm, "json").then(
          (res) => {
            if (res.code == "0000") {
              this.$message({
                type: "success",
                message: "登录成功",
              });
              this.$store.commit("changeLoginStatus", true);
              Cookie.set("token", res.result.token);
              // Cookie.set("user", this.dataForm.userId);
              Cookie.set("user", res.result.userId);
              Cookie.set("userType", res.result.userType);
              var roleIdList=res.result.roleIds;


              if(roleIdList!=null&&roleIdList.length>0){
                 Cookie.set("roleId", roleIdList[0]);
              }

              this.$router.push("/");
            }
            this.loading = false;
          }
        );
      }
    },
  },
};
</script>
<style scoped>
img {
  width: 100%;
}
#content .w {
  background: url("../../assets/img/loging-banner.png") no-repeat;
  height: 354px;
  background-size: contain;
}
#content {
  background-position: center;
  background-size: 101%;
  background-repeat: no-repeat;
}
#content > div {
  margin: 0 auto;
  text-align: right;
}
#content > div .text-box {
  flex-basis: 800px;
  -webkit-flex-basis: 800px;
  width: 800px;
  display: inline-block;
  text-align: center;
  color: #ffffff;
}
#content > div .login-box {
  display: inline-block;
  width: 297px;
  line-height: normal;
  background-color: #ffffff;
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s line-height;
  vertical-align: middle;
  margin-right: 158px;
  height: 298px;
  margin-top: 31px;
  border-radius: 4px;
}
#content > div .text-box h1 {
  font-size: 56px;
  line-height: 120px;
}
#content > div .text-box p {
  font-size: 30px;
  line-height: 100px;
}
#content > div .login-box > p span {
  font-size: 22px;
  color: #333333;
  text-align: center;
  display: inline-block;
  margin-right: 56px;
  margin-left: 56px;
  padding-bottom: 15px;
  padding-top: 30px;
  margin-bottom: 20px;
  cursor: pointer;
}
#content > div .login-box > p span.act {
  color: #e75d5d;
  border-bottom: 2px solid #e75d5d;
}
#content > div .login-box > form {
  padding: 20px;
}
#content > div .login-box > form .input-group {
  margin-bottom: 15px;
}
#content > div .login-box > form .input-group .lable {
  font-size: 18px;
  padding: 10px 0;
  text-align: left;
}
.input-group span {
  font-size: 14px;
  color: #000000;
  display: inline-block;
  width: 48px;
  text-align: left;
}
#content > div .login-box > form .input-group .lable a {
  float: right;
  font-size: 14px;
  color: #d0181e;
}
#content > div .login-box > form .input-group i {
  color: #ddd;
  font-size: 24px;
  margin-right: 10px;
  vertical-align: middle;
}
#content > div .login-box > form .input-group input {
  width: 196px;
  height: 35px;
  border: none;
  padding-left: 10px;
  font-size: 14px;
  box-sizing: border-box;
  background: #f6f6f6;

  border: 1px solid #e7e7e7;
}
#content > div .login-box > form .input-group .code {
  font-size: 0;
  line-height: 35px;
  width: 245px;
  margin-left: 10px;
}
#content > div .login-box > form .input-group.hide {
  display: none;
}
#content > div .login-box > form .input-group .code input {
  width: 100px !important;
  vertical-align: top;
  margin-left: 3px;
}
#content > div .login-box > form .input-group .code img {
  width: 91px !important;
  height: 35px;
  vertical-align: top;
  cursor: pointer;
  cursor: -ms-pointer;
}

#content > div .login-box > form p {
  position: relative;
  z-index: 1;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  margin-bottom: 15px;
  margin-top: 10px;
  padding: 0 5px;
}
#content > div .login-box > form p a {
  color: #6e6e6e;
}
#content > div .login-box > form p a.register {
  float: right;
}
#content > div .login-box > form p.login-err-active {
  top: 0;
}
#content > div .login-box > form .login-err {
  height: 0;
  text-align: center;
}
#loginsub {
  margin-top: 30px;
  border-radius: 4px;
}
#content > div .login-box > form > input {
  width: 256px;
  height: 44px;
  background: #f48d06;
  border: none;
  font-size: 14px;
  color: #ffffff;
  position: relative;
  cursor: pointer;
  cursor: -ms-pointer;
  margin-bottom: 20px;
}
#content > div .login-box > form .input-group .code input[name="yzm"] {
  width: 152px !important;
}
#code {
  cursor: pointer;
  font-size: 16px;
  display: inline-block;
  background-color: #fff;
  padding: 4px;
  width: 84px;
  border-radius: 3px;
  border: 1px solid #ccc;
  text-align: center;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>
